<template>
  <div class="ins">
    <div class="ins_top">
      <div class="title">入库明细查询</div>
      <div class="query">
        <div class="query_text">查询</div>
        <div class="blocks">
          <div class="demo-date-picker">
            <div class="date">入库时间</div>
            <div class="block">
              <el-date-picker v-model="value1" type="date" placeholder="年 / 月 / 日" />
            </div>
          </div>
          <div class="card">入库单号</div>
          <div>
            <el-input v-model="input" />
          </div>
          <div class="master">货主姓名</div>
          <div>
            <el-input v-model="input" />
          </div>
          <div class="button"><el-button type="info">查询</el-button></div>
        </div>
      </div>
      <div class="cards">
        <el-table
          ref="multipleTableRef"
          :data="tableData"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="card" label="明细号" width="180">
            <template #default="scope">{{ scope.row.date }}</template>
          </el-table-column>
          <el-table-column prop="master" label="货主" />
          <el-table-column prop="tray" label="托盘" />
          <el-table-column prop="name" label="货物名称" />
          <el-table-column prop="store" label="仓库员" />
          <el-table-column prop="num" label="入库数量" />
          <el-table-column prop="spec" label="规格" />
          <el-table-column prop="tnum" label="当前数量" />
          <el-table-column prop="date" label="编辑日期" width="180" />
          <el-table-column prop="delete" label="是否删除" />
        </el-table>
        <div class="history">没有相关记录!</div>
      </div>
    </div>
    <div class="title">入库明细信息</div>
    <div class="message">
      <div class="message_inps">
        <div class="message_inps_text">业务单明细表</div>
        <el-input class="in" v-model="input" />
      </div>
      <div class="message_inps">
        <div class="message_inps_text">商品名称</div>
        <el-input class="in" v-model="input" />
      </div>
      <div class="message_inps">
        <div class="message_inps_text">规格</div>
        <el-input class="in" v-model="input" />
      </div>
      <div class="message_inps">
        <div class="message_inps_text">件数</div>
        <el-input class="in" v-model="input" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import type { ElTable } from "element-plus";
interface User {
  date: string;
  name: string;
  address: string;
}
const input = ref("");
const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const multipleSelection = ref<User[]>([]);
// const toggleSelection = (rows ? : User[]) => {
// 	if (rows) {
// 		rows.forEach((row) => {
// 			// TODO: improvement typing when refactor table
// 			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// 			// @ts-expect-error
// 			multipleTableRef.value!.toggleRowSelection(row, undefined)
// 		})
// 	} else {
// 		multipleTableRef.value!.clearSelection()
// 	}
// }
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val;
};
const tableData = [
  {
    card: "11122233",
    master: "小黑",
    tray: "1",
    name: "导弹",
    store: "小陈",
    num: "1",
    spec: "颗",
    tnum: "999",
    date: "2016-08-03 13:23:33",
    delete: "否",
  },
  {
    card: "00002233",
    master: "白玉",
    tray: "1",
    name: "导弹",
    store: "小陈",
    num: "1",
    spec: "颗",
    tnum: "666",
    date: "2018-09-22 08:03:26",
    delete: "否",
  },
];
//时间
const value1 = ref("");
// const value2 = ref("");

// const shortcuts = [
//   {
//     text: "Today",
//     value: new Date(),
//   },
//   {
//     text: "Yesterday",
//     value: () => {
//       const date = new Date();
//       date.setTime(date.getTime() - 3600 * 1000 * 24);
//       return date;
//     },
//   },
//   {
//     text: "A week ago",
//     value: () => {
//       const date = new Date();
//       date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
//       return date;
//     },
//   },
// ];

// const disabledDate = (time: Date) => {
//   return time.getTime() > Date.now();
// };
</script>

<style>
.cards {
  border: 1px solid lightgrey;
}

.history {
  color: #666666;
  font-size: 14px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.demo-date-picker {
  display: flex;
  flex-direction: row;
  width: 33%;
  padding: 0;
  flex-wrap: wrap;
}

.demo-date-picker .block {
  padding: 10px 0;
  text-align: center;
  /* border-right: solid 1px var(--el-border-color); */
  flex: 1;
}

.demo-date-picker .block:last-child {
  border-right: none;
}

.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}

.blocks {
  display: flex;
  width: 100%;
  color: #333333;
  font-size: 14px;
  align-items: center;
  background-color: #f7f7f7;
}

.date {
  padding-left: 10px;
  display: flex;
  align-items: center;
}
.card {
  margin-right: 20px;
}
.master {
  margin: 0 20px;
}
.button {
  margin-left: 20px;
}
.message_inps {
  display: flex;
  padding: 3px 24px;
  color: #666666;
  font-size: 14px;
  border-bottom: 1px solid lightgrey;
}
.message_inps_text {
  width: 164px;
  display: flex;
  align-items: center;
}
.in {
  width: 223.6px;
}
.title {
  color: #2e6095;
  font-size: 14px;
  padding: 10px 0 10px 25px;
  background-color: #f7f7f7;
}
.query_text {
  color: #333333;
  font-size: 14px;
  padding: 10px 0 10px 25px;
}
.ins_top {
  border: 1px solid lightgrey;
  margin-bottom: 10px;
}
.message {
  margin-top: 10px;
  border: 1px solid lightgrey;
  background-color: #f7f7f7;
}
</style>
